<template>
  <div v-if="reloadFlag">
    <el-form
      ref="formRef"
      :model="form"
      :size="size"
      :label-width="labelWidth"
      class="_search_form"
      :label-position="labelPosition"
      :rules="rules"
      :hide-required-asterisk="hideRiskStar"
    >
      <el-row
        type="flex"
        style="flex-wrap:wrap"
        :gutter="20"
      >
        <el-col
          v-for="item in configs"
          v-if="!item.hidden"
          :key="item.key"
          :span="item.span || 8"
          :offset="item.offset"
          :push="item.push"
          :pull="item.pull"
        >
          <el-form-item
            v-if="!item.show"
            :label="item.label"
            :prop="item.key"
            :label-width="item.labelWidth"
            :style="{marginBottom}"
          >
            <!-- 具名插槽 自定义 -->
            <template v-if="$slots[item.key]">
              <slot :name="item.key" />
            </template>
            <!-- 文本框 -->
            <span v-if="!$slots[item.key] && item.type == 'text'">{{ form[item.key] }}</span>
            <!-- 输入框 -->
            <el-input
              v-if="!$slots[item.key] && item.type == 'input'"
              v-model.trim="form[item.key]"
              :type="item.textarea ? 'textarea': ''"
              :rows="item.textarea && ( item.textarea.rows || 5) "
              :style="{width: item.width}"
              :show-word-limit="item.textarea && item.textarea.maxLength"
              :max-length="item.textarea && item.textarea.maxLength"
              clearable
              :placeholder="item.placeholder || item.label"
              :readonly="item.readonly"
              :disabled="item.disabled"
              @change="(val) => { item.change && item.change(val)}"
            />
            <!-- 密码框 -->
            <el-input
              v-if="!$slots[item.key] && item.type == 'password'"
              v-model="form[item.key]"
              show-password
              :rows="item.textarea && ( item.textarea.rows || 5) "
              :style="{width: item.width}"
              clearable
              :placeholder="item.placeholder || item.label"
              @change="(val) => { item.change && item.change(val)}"
            />
            <!-- 选择框 -->
            <el-select
              v-if="!$slots[item.key] && item.type == 'select'"
              v-model="form[item.key]"
              :style="{width: item.width}"
              clearable
              :filterable="item.filterable"
              :placeholder="item.placeholder || '请选择'"
              :disabled="item.disabled"
              @change="(val) => { item.change && item.change(val)}"
            >
              <el-option
                v-for="_t in item.options"
                :key="_t.value"
                :label="_t.label"
                :value="_t.value"
              />
            </el-select>
            <!-- 级联选择框 -->
            <el-cascader
              v-if="!$slots[item.key] && item.type == 'cascader'"
              ref="cascader"
              v-model="form[item.key]"
              :options="item.options"
              :props="item.props"
              :show-all-levels="false"
              :disabled="item.disabled"
              :style="{width: item.width}"
              :filterable="item.filterable || true"
              clearable
              @change="item.change"
            />
            <!-- 时间范围选择 -->
            <el-date-picker
              v-if="!$slots[item.key] && item.type == 'daterange'"
              v-model="form[item.key]"
              clearable
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :disabled="item.disabled"
              :style="{width: item.width}"
              @change="(val) => { item.change && item.change(val)}"
            />
            <el-date-picker
              v-if="!$slots[item.key] && item.type == 'datetimerange'"
              v-model="form[item.key]"
              clearable
              type="datetimerange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
              :disabled="item.disabled"
              :style="{width: item.width}"
              @change="(val) => { item.change && item.change(val)}"
            />
            <el-date-picker
              v-if="!$slots[item.key] && item.type == 'date'"
              v-model="form[item.key]"
              clearable
              :type="item.dateType || 'date'"
              :value-format="item.valueFormat || 'yyyy-MM-dd'"
              :style="{width: item.width}"
              :readonly="item.readonly"
              :disabled="item.disabled"
              :picker-options="item.pickerOptions"
              @change="(val) => { item.change && item.change(val)}"
            />
            <el-date-picker
              v-if="!$slots[item.key] && item.type == 'datetime'"
              v-model="form[item.key]"
              clearable
              type="datetime"
              value-format="yyyy-MM-dd hh:mm:ss"
              :disabled="item.disabled"
              :style="{ width: item.width }"
              @change="(val) => { item.change && item.change(val) }"
            />
            <el-radio-group
              v-if="!$slots[item.key] && item.type == 'radio'"
              v-model="form[item.key]"
              :disabled="item.disabled"
              @change="(val) => { item.change && item.change(val)}"
            >
              <el-radio
                v-for="t in item.radios"
                :key="t.value"
                :label="t.value"
              >
                {{ t.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          v-if="!$scopedSlots.default && !hiddenBtn"
          :span="8"
          :offset="btnConfig && btnConfig.offset || 0"
        >
          <div :style="{textAlign: 'center'}">
            <el-button
              class="form-btn"
              :size="size"
              @click="reset"
            >
              重置
            </el-button>
            <el-button
              type="primary"
              class="form-btn"
              :size="size"
              @click="search"
            >
              查询
            </el-button>
            <slot name="addBtn" />
          </div>
        </el-col>
        <el-col
          :span="btnConfig && btnConfig.span || 24"
          :offset="btnConfig && btnConfig.offset || 0"
        >
          <slot :form="form" />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
	name: 'SearchQuery',
	props: {
		hideRiskStar: {
			type: Boolean,
			default: false
		},
		configs: {
			type: Array || Object,
			default: () => [],
		},
		size: {
			type: String,
			default: 'default'
		},
		hiddenBtn: {
			type: Boolean,
			default: false
		},
		hiddenTitle: {
			type: Boolean,
			default: false
		},
		btnConfig: {
			type: Object,
			default: () => null
		},
		labelWidth: {
			type: String,
			default: ''
		},
		labelPosition: {
			type: String,
			default: 'right'
		},
		marginBottom: {
			type: String,
			default: ''
		},
		rules: {
			type: Object,
			default: () => null
		}
	},
	data() {
		return {
			form: {},
			a: '',
			reloadFlag: true
		};
	},
	mounted() {
		console.log(this.rules);

		this.setQueryValue(this.configs);
		this.resetFields();
	},
	methods: {
		//关闭级联框
		closeCascader(val){
			this.$refs['cascader'].forEach(item=>{
				if(item.dropDownVisible){
					item.toggleDropDownVisible();
				}
			});
		},
		setQueryValue (valList) {
			valList.forEach(a => {
				this.$set(this.form, a.key, a.value || '');
				if (a.type == 'daterange') {
					this.$set(this.form, a.key, null);
				}
				if (a.type == 'checkbox') {
					this.$set(this.form, a.key, []);
				}
			});
		},
		search() {
			this.$emit('onSearch', this.form);
		},
		reset() {
			this.configs.forEach(a => {
				// 不可编辑的值不清空
				if (!a.disabled) {
					this.form[a.key] = '';
					if (a.type == 'daterange') {
						this.form[a.key] = null;
					}
				}
			});
			this.$emit('onReset', this.form);
			this.resetFields();
		},
		validate(cb) {
			this.$refs.formRef.validate(val => {
				cb(val);
			});
		},
		validateField(str, cb) {
			this.$refs.formRef.validateField(str, val => {
				cb(val);
			});
		},
		resetFields() {
			this.rules && this.$refs.formRef.resetFields();
		},
		reload() {
			console.log('reload');
			this.reloadFlag = false;
			this.$nextTick(() => {
				this.reloadFlag = true;
				this.setQueryValue(this.configs);
			});
		}
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-editor,
.el-cascader{
	width: 100%;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
	width: 100%;
}
.form-btn {
	width: 80px;
}
</style>
<style>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
	margin-bottom: 16px;
}
.el-form-item__content {
	line-height: 36px;
}
.el-input__icon {
	line-height: 36px;
}
</style>
